<template>
  <div class="home">
    <!-- <div>{{ age }}</div>
    <div>{{ name }}</div>
    <div>{{ doubleAge }}</div>
    <div>{{ doubleAgeAddOne }}</div>
    <div>{{ getUserName(1) }}</div> -->
    <ul>
      <template v-for="item in content" :key="item.id">
        <li>{{ item.content }}</li>
      </template>
    </ul>
    <button @click="add">增加</button>
    <button @click="reset">重置</button>
    <button @click="replace">替换</button>
  </div>
</template>

<script setup>
import { watchEffect } from "vue";
import { storeToRefs } from "pinia";
import useComtent from "../stores/content";

const contenterStore = useComtent();
const { name, age, doubleAge, doubleAgeAddOne, getUserName, content } =
  storeToRefs(contenterStore);

contenterStore.getContent();

const add = () => {
  contenterStore.age++;
  //   contenterStore.$patch({  //批量修改数据
  //     age: 100,
  //     name: "jack",
  //   });
};
const reset = () => {
  contenterStore.$reset(); //将数据恢复为默认值
};
const replace = () => {
  contenterStore.$state = { age: 100 }; //替换数据的值
};
</script>

<style lang="scss" scoped></style>
